<template>
  <div class="list">
    <!-- 面包屑导航 -->
    <bread :item="['商品管理','商品列表']"></bread>
    <!-- 卡片区域 -->
    <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <!-- 头部搜索框 -->
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoods">
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <!-- 头部添加按钮 -->
            <el-button type="primary" @click="toAdd">添加商品</el-button>
          </el-col>
        </el-row>

        <!-- 表格区域 -->
        <el-table :data="goods" border stripe height="490">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="商品名称" prop="goods_name" show-overflow-tooltip></el-table-column>
            <el-table-column label="商品价格(元)" prop="goods_price" width="120"></el-table-column>
            <el-table-column label="商品重量" prop="goods_weight" width="120"></el-table-column>
            <el-table-column label="创建时间" width="140">
              <template slot-scope="scope">
                {{scope.row.add_time| dataFormat}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
              <template slot-scope="scope">
                 <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                 <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.goods_id)"></el-button>
              </template>
            </el-table-column>
        </el-table>

        <!-- 分页区 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[6, 10, 15, 33]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" background>
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {bread, default as fn} from "tools"
export default {
  components:{
    bread
  }
 ,data(){return{
    queryInfo:{
      query:""
     ,pagenum:1
     ,pagesize:6
    }
    //商品列表
   ,goods:[]
   //商品总数
   ,total:0
 }}
 ,created(){
   this.getGoods()
 }
 ,methods:{
   async getGoods(){
     //获取请求
     let {data:ret}= await this.$XHR.get('goods',{
       params:this.queryInfo
     })
     //出错提示
     if(ret?.meta?.status!==200) return fn.mg("error","获取列表失败")
     //保存数据
     this.goods= ret?.data?.goods ? ret.data.goods : []
     this.total= ret?.data?.total ? ret.data.total : []
     return ret
   }
   //每页数据条改变时触发
   ,handleSizeChange(n){
     this.queryInfo.pagesize=n
     this.getGoods()
   }
   //选着下一页时触发
   ,handleCurrentChange(n){
     this.queryInfo.pagenum= n
     this.getGoods()
   }
   ,async search(){
     let rtn= await this.getGoods()
     this.$notify({
       title:"查询结果"
      ,message:"包含<"+this.queryInfo.query+">共:"+this.total+"条"
     })
   }
   //通过id删除商品
   ,removeById(id){
     this.$confirm("这将永久删除","提示",{
       confirmButtonText:"确定"
      ,cancelButtonText:"取消"
      ,type:"warning"
     })
     .then(async()=>{
       let {data:ret}= await this.$XHR.delete('goods/'+id)
       if(ret?.meta?.status!==200)return fn.mg("error","删除失败")
       fn.mg("success","删除成功")
       this.getGoods()
     },()=>{})
   }
   ,toAdd(){
     this.$router.push('/goods/info')
   }
 }
}
</script>

<style lang="less" scoped>
.el-table{
  margin-top: 15px;
}
</style>